<template>
	<view class="erCode">
		<view class="erCode_Middle">
			<l-painter ref="painter">
				<l-painter-view css="background: #f0f0f0;">
					<l-painter-image src='/static/xyc/bggg.png' css="width: 100vw; height: 100vh;background-size: 100% 100%;" />
					<l-painter-view css="position: absolute;top: 22%;margin: 0 auto;width:242rpx;">
						<l-painter-image :src="userInfo.head" css="width: 90rpx; height: 90rpx;background-size: 100% 100%;border-radius:50%;objectFit: cover;" />
						<l-painter-text :text="userInfo.nickname" css="position: absolute;top: 10rpx;left:90rpx;width:196rpx;margin: 0 auto;font-size:28rpx; line-clamp:1;font-weight:bold;color:black;" />
						<l-painter-text text="邀您注册扫码" css="position: absolute;top: 50rpx;left:90rpx;width:196rpx;margin: 0 auto;font-size:24rpx;color:black;" />
					</l-painter-view>
					<l-painter-text :text="'邀请码: '+userInfo.salt" css="position: absolute;top: 60%;width:222rpx;margin: 0 auto;font-size:28rpx; text-align: center;color: black;" />
					<l-painter-view css="position: absolute;top:34%;margin: 0 auto;width:342rpx;height: 342rpx;background: #fff;border-radius: 10rpx;">
						<l-painter-qrcode :text="http.shareUrl + '?invitationCode=' + userInfo.salt" css="width: 322rpx; height: 322rpx;position: absolute;top: 10rpx;margin: 0 auto;background: #fff;" />
					</l-painter-view>
				</l-painter-view>
			</l-painter>
			<view class="share-box">
				<view class="share" @tap="shareOther">分享给好友</view>
				<view class="download" @tap="shareDownLoad">复制下载链接</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config/config.js';
	import { sysConfig, lastVersion } from '@/common/api/api.js';
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				list: '',
				show: false,
				downloadUrl: '',
				invitationCode: '',
				inviteUrl: '',
				loading: true,
				http: config.env,
			};
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		methods: {
			shareOther() {
				let that = this
				// #ifdef H5
				return this.$msg('请截屏分享')
				// #endif
				// #ifndef H5
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath);
						// 非H5 保存到相册
						// H5 提示用户长按图另存
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								that.$msg('保存到相册成功')
							},
							fail: function() {
								that.$msg('保存失败')
							}
						});
					},
				});
				// #endif

			},
			shareDownLoad() {
				let that = this
				uni.setClipboardData({
					data: this.http.shareUrl + '?invitationCode=' + this.userInfo.salt,
					success: function() {
						that.$msg('复制成功')
					}
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.erCode {
		.erCode_Middle {
			position: relative;

			.share-box {
				position: fixed;
				bottom: 5%;
				left: 0;
				width: 100%;
				display: flex;
				justify-content: center;

				.share,
				.download {
					font-size: 30rpx;
					font-weight: 500;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 273rpx;
					height: 85rpx;
					background: linear-gradient(0deg, #DA8600 0%, #F39B0E 100%);
					box-shadow: 2rpx 7rpx 14rpx 0px rgba(140, 86, 0, 0.22);
					border-radius: 42rpx;
				}

				.share {
					margin-right: 40rpx;
				}
			}

		}
	}
</style>